<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Participantes</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	{% load staticfiles %} <link rel="stylesheet" href="{% static "css/spacelab.css" %}">
	{% load staticfiles %} <link rel="stylesheet" href="{% static "css/responsive.css" %}">
	{% load staticfiles %} <link rel="stylesheet" href="{% static "css/misestilos.css" %}"> 
	        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "css/menu_jquery.css" %}">
</head>
<body>

	{% include "topmenu.html" %} <!-- Top menu -->

	<div class="container">
		<div class="row-fluid">
			
			{% include "sidebar.html" %} <!-- Side bar -->
			<!-- Listado de universidades divididas por regiones -->
			<div class="span9">
				<!-- Universidades participantes agrupadas por region -->
				<div class="row-fluid">
                        <div class="page-header">
                            <h3>Participantes del proyecto</h3>
                        </div>
                    </div>
				{% if universidades %}
	    			{% for region in regiones%}
					<div class="span9"	>
						<div class="row-fluid">
							<div class="page-header">
								<h3>{{ region.nombre }}</h3>
							</div>
						</div> <!-- Primera fila - titulo de la region -->
						<div class="row-fluid">
							<div class="span9">
								<ul class="unstyled">
									{% if links %}
										{% for universidad in universidades %}
											{% if universidad.region.pk == region.pk %}
												<li>
													<a href="/plataforma/participantes/{{universidad.id}}">
													<img src="{{ STATIC_URL }}banderas{{universidad.pais.flag}}" alt="">&emsp;{{ universidad.nombre }}
													</a>
												</li>
											{% endif %}
	            						{% endfor %}
	            					{% else %}
	            						{% for universidad in universidades %}
											{% if universidad.region.pk == region.pk %}
												<li>
													<img src="{{ STATIC_URL }}banderas{{universidad.pais.flag}}" alt="">&emsp;{{ universidad.nombre }}
													
												</li>
											{% endif %}
	            						{% endfor %}
	            					{% endif %}
								</ul>
							</div>
						</div> <!-- Segunda fila - Bandera, Pais y listado de universidades de la region -->
						<br><!-- Fin de Region-->
					</div>
					{% endfor %}
				{% else %}
					<div class="alert alert-error">
						<h4>Oops</h4>No existen universidades cargadas en el sistema!
					</div>
				{% endif %}
			</div>
		</div> <!-- /row -->

	{% include "footer.html" %} <!-- Footer -->
	</div> <!-- /container -->

	<!-- JS files -->
	{% load staticfiles %} <script type="text/javascript" src="{% static "js/jquery.js" %}"></script>
	{% load staticfiles %} <script type="text/javascript" src="{% static "js/bootstrap.js" %}"></script>
	        {% load staticfiles %} <script type="text/javascript" src="{% static "js/menu_jquery.js" %}"></script>
</body>
</html>